<template>
	<div>
		<el-dialog v-model="showDialog" title="消息详情" width="800px" draggable>
			<div>
				<div class="title">
					{{ props.detial.title }}
				</div>
				<Editor style="height: 500px" class="editor-content'" v-model="props.detial.content" @on-created="handleCreated" />
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="showDialog = false">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { computed, onMounted, shallowRef } from "vue";
import "@wangeditor/editor/dist/css/style.css";
import { Editor } from "@wangeditor/editor-for-vue";

const emit = defineEmits(["update:showDialog"]);
const props = defineProps<{
	showDialog: boolean;
	detial: any;
}>();
const showDialog = computed({
	get() {
		return props.showDialog;
	},

	set(value) {
		emit("update:showDialog", value);
	}
});
// 富文本 DOM 元素
const editorRef = shallowRef();

// 实列化编辑器
const handleCreated = (editor: any) => {
	editorRef.value = editor;
	editorRef.value.disable();
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.title {
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 20px;
}
/* 富文本组件禁用样式 */
.editor-disabled {
	cursor: not-allowed !important;
}
</style>
